<template>
  <div class="fileBox">
    <!-- 判断文件类型 -->
    <!-- <input type="file" @change="getFileType" /> -->

    <!-- 解析excel -->
    <a-upload
      v-model:file-list="fileListData"
      name="file"
      accept=".xlsx,.xls"
      :multiple="false"
      :beforeUpload="beforeUpload"
      :max-count="1"
    >
      <a-button>
        <upload-outlined></upload-outlined>
        上传文件
      </a-button>
    </a-upload>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getFileType } from "../../utils/getFileType";
import { asyncReadExcel, rewriteExcel } from "../../utils/excel";

const fileListData = ref<any[]>([]);

const beforeUpload = async (file: any) => {
  // 文件类型判断和校验逻辑
  if (
    file.type ===
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
    file.type === "application/vnd.ms-excel"
  ) {
    // 解析excel
    const newFile = await asyncReadExcel(file);
    console.log(newFile);
    // 重写excel并导出
    // rewriteExcel(file);
  }

  return false; //阻止自动上传
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.fileBox {
  height: 100vh;
  width: 100vw;
  position: relative;
  display: block;
  overflow: hidden;

  > div {
    margin: 10px;
    border: 1px solid #000;
    display: flex;
    justify-content: flex-start;
    align-content: center;
  }

  button,
  audio {
    margin-right: 10px;
  }
}
</style>
